<template>
  <div class="filter-section">
    <div class="filter-header">
      <span>筛选条件</span>
      <div class="filter-actions">
        <el-button size="small" text type="primary" @click="handleSearch">查询</el-button>
        <el-button size="small" text type="info" @click="handleReset">重置</el-button>
      </div>
    </div>

    <el-form class="filter-form" :inline="true" size="small">
      <el-form-item label="日期">
        <el-date-picker
          v-model="filterData.date"
          :disabled-date="disablePastDates"
          format="YYYY-MM-DD"
          placeholder="选择日期"
          style="width: 160px"
          type="date"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="时间段">
        <el-select v-model="filterData.timeSlot" clearable placeholder="选择时间段" style="width: 120px">
          <el-option label="上午" value="morning" />
          <el-option label="下午" value="afternoon" />
          <el-option label="全天" value="allday" />
        </el-select>
      </el-form-item>

      <el-form-item label="设备">
        <el-select
          v-model="filterData.equipment"
          clearable
          collapse-tags
          collapse-tags-tooltip
          multiple
          placeholder="选择设备"
          style="width: 160px"
        >
          <el-option v-for="item in equipmentOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="位置">
        <el-input v-model="filterData.location" clearable placeholder="输入位置" style="width: 160px" />
      </el-form-item>

      <el-form-item label="容量">
        <div class="capacity-input">
          <el-input-number
            v-model="filterData.capacity"
            :controls="false"
            :max="100"
            :min="0"
            placeholder="最低容量"
            style="width: 100px"
          />
        </div>
      </el-form-item>

      <div class="filter-extra-actions">
        <el-button link @click="handleSearch">查询</el-button>
        <el-button link @click="handleReset">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { reactive, watch } from 'vue'

// 设备选项
const equipmentOptions = [
  { label: '投影仪', value: '投影仪' },
  { label: '电子白板', value: '电子白板' },
  { label: '视频会议', value: '视频会议' },
  { label: '音响设备', value: '音响设备' },
  { label: '麦克风', value: '麦克风' },
]

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['update:modelValue', 'search', 'reset'])

// 筛选数据（使用本地状态而不是直接修改props）
const filterData = reactive({
  date: props.modelValue.date || dayjs().format('YYYY-MM-DD'),
  timeSlot: props.modelValue.timeSlot || '',
  equipment: props.modelValue.equipment || [],
  location: props.modelValue.location || '',
  capacity: props.modelValue.capacity || 0,
})

// 禁用过去的日期
const disablePastDates = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7
}

// 监听本地数据变化，同步到父组件
watch(
  filterData,
  (newVal) => {
    emit('update:modelValue', { ...newVal })
  },
  { deep: true }
)

// 监听props变化，同步到本地数据
watch(
  () => props.modelValue,
  (newVal) => {
    Object.assign(filterData, newVal)
  },
  { deep: true }
)

// 处理搜索
const handleSearch = () => {
  emit('search')
}

// 处理重置
const handleReset = () => {
  filterData.date = dayjs().format('YYYY-MM-DD')
  filterData.timeSlot = ''
  filterData.equipment = []
  filterData.location = ''
  filterData.capacity = 0

  emit('reset')
}
</script>

<style scoped>
.filter-section {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-header span {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.filter-form .el-form-item {
  margin-bottom: 8px;
  margin-right: 0;
}

.capacity-input {
  display: flex;
  align-items: center;
}

.filter-extra-actions {
  display: none;
}

.filter-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  .filter-form {
    flex-direction: column;
  }

  .filter-form .el-form-item {
    margin-right: 0;
    width: 100%;
  }

  .filter-actions {
    display: none;
  }

  .filter-extra-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 12px;
    gap: 12px;
  }
}
</style>
